<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="base.jsp" %>
<%
    String socketPath = request.getServerName() + ":" + request.getServerPort() + "/";
    pageContext.setAttribute("socketPath", socketPath);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" type="text/css"/>
    <link rel="icon" type="images/x-icon" href="${ctx}file/images/favicon.ico">
    <title>聊天-ArvinClub</title>
    <!-- Bootstrap core CSS -->
    <link href="${ctx}vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="${ctx}assets/css/fontawesome.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/templatemo-style.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/owl.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/lightbox.css" type="text/css"/>
    <style>

        .message1 p {
            font-size: 18px;
        }

        @media (max-width: 845px) {
            .section-heading {
                padding: 40px 0 60px 0;
            }

            section.contact-me {
                padding-bottom: 60px;
            }

            .myimg {
                margin: 0 auto;
                text-align: center;
            }

            .message1 p {
                font-size: 14px;
            }

        }


    </style>

</head>

<body onload="javascript:document.getElementById('text').focus()">
<div id="page-wraper" style="min-height: 100vh">
    <!-- Sidebar Menu -->
    <div class="responsive-nav">
        <i class="fa fa-bars" id="menu-toggle"></i>
        <div id="menu" class="menu">
            <i class="fa fa-times" id="menu-close"></i>
            <div class="container">

                <div class="author-content" style="margin: 80px 0 60px 0">
                    <h4 style="font-size: 40px">${sessionScope.user.name}</h4>
                    <c:choose>
                        <c:when test="${user.admin > 0}">
                            <p style="margin-top: 10px;cursor:pointer" onclick="javascript:window.open('${ctx}admin/manager.html')">管理员</p>
                        </c:when>
                        <c:otherwise>
                            <p style="margin-top: 10px">欢迎</p>
                        </c:otherwise>
                    </c:choose>
                </div>
                <nav class="main-nav" role="navigation">
                    <ul class="main-menu">
                        <li><a href="${ctx}user/blogs.html">网站首页</a></li>
                        <li><a href="${ctx}user/attention.html">关注动态</a></li>
                        <li><a href="${ctx}user/page.html">我的主页</a></li>
                        <li><a href="${ctx}user/chat.html" style="background: #fff;color: #8c363e">在线聊天</a></li>
                        <li><a href="${ctx}user/search.html">查找内容</a></li>
                        <li><a href="${ctx}user/update.html">更新日志</a></li>
                        <li><a href="${ctx}user/exit">退出登录</a></li>
                    </ul>
                </nav>
                <div class="social-network">

                </div>
                <div class="copyright-text">
                    <p>Copyright &copy; 2019 Arvin<br>联系方式: <a
                            href="mailto:arvin5445@qq.com" target="_top">arvin5445@qq.com</a><br><a
                            href="http://beian.miit.gov.cn/" target="_blank">浙ICP备19031638号-1</a></p>
                </div>
            </div>
        </div>
    </div>

    <section class="section contact-me" data-section="section4" style="padding-bottom: 0;border: unset">
        <div class="container" style="max-width: unset">
            <div class="section-heading">
                <h1 style="word-break: break-word">在线聊天</h1>
                <div class="line-dec"></div>
                <span
                ><span>当前在线人数: <span id="nums">0</span></span></span
                >
            </div>
            <div class="row">
                <div class="right-content" style="margin: 0 auto;width: 100%">
                    <div class="container"
                         style="max-width: unset">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section about-me" data-section="section1" style="border-bottom: none">
        <div class="container" style="max-width: unset">
            <div class="myimg" style="text-align: center; border-bottom: 2px solid rgba(250, 250, 250, 0.1);">
                <input id="text" type="text"
                       onkeydown="if(event.keyCode == 13){document.getElementById('form-submit').click();return false;}"
                       style="margin: 0 0 20px 0;
                            background-color: rgba(250,250,250,0.1);
                            border: 1px solid rgba(250,250,250,1);
                             width: 100%;
                       border-radius: 0px;
                       font-size: 18px;
                       line-height: 40px;
                       padding-left: 18px;
                       color: #fff;
"/>
                <br>
                <button onclick="closeWebSocket()" style="float: left">离开房间</button>
                <button onclick="send1()" id="form-submit" style="float: right" type="submit" class="button">发送消息
                </button>
                <br>
                <br>
                <br>
            </div>
            <div id="message1" style="clear: both; margin: 20px" class="message1"></div>
        </div>
    </section>

</div>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="${ctx}vendor/jquery/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}vendor/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>

<script src="${ctx}assets/js/isotope.min.js" type="text/javascript"></script>
<script src="${ctx}assets/js/owl-carousel.js" type="text/javascript"></script>
<script src="${ctx}assets/js/lightbox.js" type="text/javascript"></script>
<script src="${ctx}assets/js/custom.js" type="text/javascript"></script>
<script>
    console.log("感谢您帮我测试,如果发现BUG还请留言。");
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://${pageScope.socketPath}webSocketByTomcat");
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://${pageScope.socketPath}webSocketByTomcat");
    } else {
        websocket = new SockJS("${pageScope.socketPath}webSocketByTomcat");
    }

    function setNum(i) {
        document.getElementById("nums").innerHTML = i;
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("<span style='color: blue'>===连接发生错误===</span>");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("<span style='color: blue'>===连接成功===</span>");
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
        loadNum();
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("<span style='color: blue'>===你已断开连接===</span>");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message1').innerHTML = '<p style=\"word-break: break-word\">' + innerHTML + '</p>' + document.getElementById('message1').innerHTML;
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send1() {
        var message = document.getElementById('text').value;
        if (message.trim() != "")
            websocket.send(message);
        document.getElementById('text').value = "";
        document.getElementById('text').focus();
    }

    function loadNum() {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("nums").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/getCount?t=" + Math.random(), true);
        xmlhttp.send();
    }
</script>


</body>
</html>